<template>
<!--  订单详情-->
    <div class="container" style="margin: 10px">
      <div class="top-container">
        <el-card class="operate-container" shadow="never">
          <el-steps align-center :active="1" finish-status="success">
            <el-step title="提交订单" :description="time"></el-step>
            <el-step title="支付订单"></el-step>
            <el-step title="平台发货"></el-step>
            <el-step title="确认收货"></el-step>
            <el-step title="完成评价"></el-step>
          </el-steps>
        </el-card>
        <el-card class="card-container" shadow="never">
          <i :class="iconName" style="color: red"></i>
          <span style="font-size: 18px;color: red"> {{Tips}}</span>
          <el-button plain style="float: right;margin-left: 20px">备注订单</el-button>
        </el-card>
      </div>
      <div class="table-container">
        <div>
          <el-card class="top-container" shadow="never">
            <i class="el-icon-s-order"></i>
            <span>基本信息</span>
          </el-card>
          <el-table
            :header-cell-style="{textAlign: 'center'}"
            :cell-style="{ textAlign: 'center' }"
            :data="basicInfo">
            <el-table-column label="订单编号" prop=""></el-table-column>
            <el-table-column label="发货单流水号" prop=""></el-table-column>
            <el-table-column label="用户账号" prop=""></el-table-column>
            <el-table-column label="支付方式" prop=""></el-table-column>
            <el-table-column label="订单来源" prop=""></el-table-column>
            <el-table-column label="订单类型" prop=""></el-table-column>
          </el-table>
        </div>
        <div>
          <el-card class="top-container" shadow="never">
            <i class="el-icon-s-order"></i>
            <span>收货人信息</span>
          </el-card>
          <el-table
            :header-cell-style="{textAlign: 'center'}"
            :cell-style="{ textAlign: 'center' }"
            :data="consigneeInfo">
            <el-table-column label="收货人" prop=""></el-table-column>
            <el-table-column label="手机号码" prop=""></el-table-column>
            <el-table-column label="邮政编码" prop=""></el-table-column>
            <el-table-column label="收货地址" prop=""></el-table-column>
          </el-table>
        </div>
        <div>
          <el-card class="top-container" shadow="never">
            <i class="el-icon-s-order"></i>
            <span>商品信息</span>
          </el-card>
          <el-table
            :header-cell-style="{textAlign: 'center'}"
            :cell-style="{ textAlign: 'center' }"
            :data="goodsInfo">
            <el-table-column label="商品编号" prop=""></el-table-column>
            <el-table-column label="商品名" prop=""></el-table-column>
            <el-table-column label="商品价格" prop=""></el-table-column>
            <el-table-column label="优惠卷抵用金额" prop=""></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "OrderDetails",
      data(){
        return{
          time:'2021-9-17 12:34:52',
          Tips:'当前订单状态:已关闭',
          iconName:'el-icon-warning',
          basicInfo:[],
          consigneeInfo:[],
          goodsInfo:[]
        }
      }
    }
</script>

<style scoped lang="scss">
.card-container{
  margin-top: 20px;
  background: rgba(167, 170, 169, 0.19);
  height: 70px;
}
</style>
